import React, { FC, useEffect, useState, useReducer } from 'react';
import { Row, Col, Card, Tooltip } from 'antd';
import styles from './song-sheet.less';
import { connect, IndexModelState, ConnectProps } from 'umi';
import { tranNumber } from '../../utils';
import CardCover from '@/compoments/cardCover/cardCover';

interface PageProps extends ConnectProps {
  index: IndexModelState;
  dispatch: any;
}

let indexActive = 0;

const SongSheet: FC<PageProps> = (props: any) => {
  let nav = [
    { title: '为你推荐', value: '' },
    { title: '华语', value: '华语' },
    { title: '流行', value: '流行' },
    { title: '摇滚', value: '摇滚' },
    { title: '电子', value: '电子' },
  ];
  const { songSheetList = [] } = props.index;
  //const [selectIndex, setIndex] = useState(0)
  let loading = false;

  const selectItem = (data: any, index: number) => {
    indexActive = index;
    //setIndex(index)
    getData();
  };

  useEffect(() => {
    getData();
    loading = true;
  }, []);

  /* useEffect(() => {
    getData();
    loading = true;
  }, [selectIndex]);*/

  let getData = () => {
    props.dispatch({
      type: 'index/getSongSheetList',
      payload: {
        cat: nav[indexActive].value,
        limit: 4,
      },
    });
  };

  return (
    <div className={styles.songSheet}>
      <div className={styles.index__hd}>
        <h2 className="index__tit">歌单推荐</h2>
      </div>

      <ul className={styles.index__tab}>
        {nav.map((data: any, index: number) => (
          <li
            key={index}
            className={
              index == indexActive ? styles.active : styles.index__item
            }
            onClick={() => {
              selectItem(data, index);
            }}
          >
            {data.title}
          </li>
        ))}
      </ul>

      <Row gutter={25}>
        {songSheetList.map((data: any, index: number) => (
          <Col className="gutter-row" span={6} key={index}>
            <Card
              loading={loading}
              hoverable
              className="cartItem"
              bodyStyle={{ padding: '20px 15px 0 15px' }}
              cover={
                <CardCover data={data} imgLabel={'coverImgUrl'}></CardCover>
              }
            >
              <div className={styles.cartMeta}>
                <Tooltip title={data.name} color={'#2db7f5'}>
                  <p className={styles.ant_card_meta_title}>{data.name}</p>
                </Tooltip>

                <p className={styles.ant_card_meta_description}>
                  播放量：{tranNumber(data.playCount, 2)}
                </p>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default connect(({ index }: { index: IndexModelState }) => ({ index }))(
  SongSheet,
);
